<template>
  <el-dialog :title="title" v-model="visible" width="480px" :fullscreen="mobile" :close-on-click-modal="false">
    <el-form :model="form" label-width="100px">
      <el-form-item label="锁名称" prop="lockAlias">
        <el-input v-model="form.lockAlias" placeholder="请输入锁名称" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="分组" prop="groupId">
        <el-select v-model="form.groupId" placeholder="请选择分组" style="width: 80%">
          <el-option :label="item.label" :value="item.value" v-for="item in groupOption" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button @click="handleOk" type="primary">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="LockEdit">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const props = defineProps({
  row: {
    type: Object,
    default: () => {}
  }
})
const visible = ref(false)
const groupOption = ref([])
const data = reactive({
  form: {
    lockId: undefined,
    lockAlias: undefined,
    groupId: undefined
  }
})
const { form } = toRefs(data)
const mobile = computed(() => useAppStore().device === 'mobile')
const title = computed(() => {
  let name = '编辑智能锁'
  if (!props.row) return name
  switch (props.row.type) {
    case '1': 
      name = '编辑低电量锁'
      break
    case '2': 
      name = '编辑房间锁'
      break
    case '3': 
      name = '编辑公区锁'
      break
    case '4': 
      name = '编辑智能锁'
      break
  }
  return name
})
watch(() => visible.value, value => {
  if (value) {
    form.value.lockId = props.row.lockId
    form.value.lockAlias = props.row.lockAlias
    form.value.groupId = props.row.groupId
  }
})

/* 取消 */
function handleCancel() {
  visible.value = false
}
/* 提交保存 */
function handleOk() {
  visible.value = false

}

function show() {
  visible.value = true
}
defineExpose({
  show
})

/* 获取分组列表 */
async function getGoupOption() {
  groupOption.value = await proxy.$dictOption.groupDictOption()
}
getGoupOption()
</script>
